{% if slideshow %}
{{ slideshow_header }}


<div id="the-carousel" class="carousel slide">
	<!-- Indicators -->
	<ol class="carousel-indicators">
		{% for slide in slides %}
			<li data-target="#the-carousel" data-slide-to="0"
				{%- if loop.index==0 %}class="active"{% endif %}></li>
		{% endfor %}
	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		{% for slide in slides %}
		<div class="{% if slide.idx==1 %}active {% endif %}item">
			<img src="{{ slide.image }}" class="slide-image" />
			{% if slide.heading or slide.description %}
			<div class="carousel-caption">
				{% if slide.heading %}<h4>{{ slide.heading }}</h4>{% endif %}
				{% if slide.description %}<p>{{ slide.description }}</p>{% endif %}
			</div>
			{% endif %}
		</div>
		{% endfor %}
	</div>

	<!-- Controls -->
	<a class="left carousel-control" href="#the-carousel" data-slide="prev">
		<span class="fa fa-chevron-left icon"></span>
	</a>
	<a class="right carousel-control" href="#the-carousel" data-slide="next">
		<span class="fa fa-chevron-right icon"></span>
	</a>
</div>

<script>
frappe.ready(function() {
	$(".carousel").carousel();
});
</script>
{% endif %}
